import classNames from "classnames";
import React, { CSSProperties, FC, useContext } from "react";
import { MenuContext } from ".";

export interface MenuItemProps {
  itemkey?: number;
  className?: string;
  style?: CSSProperties;
  disable?: boolean;
}

const MenuItem: FC<MenuItemProps> = (props) => {
  const { itemkey, className, style, disable, children, ...restProps } = props;
  const menuContext = useContext(MenuContext);
  const calssnames = classNames("menuprops", className, {
    [`disable`]: disable,
    [`active-style`]: itemkey === menuContext.key,
  });
  return (
    <li
      className={calssnames}
      style={style}
      onClick={() => {
        if (menuContext.chioceItem && itemkey !== undefined) {
          menuContext.chioceItem(itemkey);
        }
      }}
      {...restProps}
    >
      {children}
    </li>
  );
};

export default MenuItem;
